<template>
  <div
    id="scatter"
    style="width: 50px;height:50px;position:absolute;top:0"
  >
  </div>
</template>
<script>
// import Overlay from "ol/Overlay";
import EChartsLayer from "ol-echarts";
import { transform } from "ol/proj";
export default {
  methods: {
    echartInit(map, geoCoordMap) {
      // var myChart = echarts.init(document.getElementById("scatter"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: false,
          orient: "vertical",
          left: "right",
          // grid: {
          //   top: 80,
          //   left: 80,
          //   bottom: 80,
          //   right: 80,
          //   width: 60,
          //   height: 60,
          // },
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      };
      for (const key in geoCoordMap) {
        const item = geoCoordMap[key];
        var obj = {
          name: key,
          type: "bar",
          coordinates: transform(item, "EPSG:3857", "EPSG:4326"),
          data: [111, 222, 333, 444, 555],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        };
        option.series.push(obj);
      }
      var echartslayer = new EChartsLayer(option, {
        hideOnMoving: true,
      });
      echartslayer.appendTo(map);
      // myChart.setOption(option);
      // var scatter = new Overlay({
      //   projection: "EPSG:3857",
      //   position: this.position,
      //   positioning: "center-center",
      //   element: document.getElementById("scatter"),
      // });
      // this.map.addOverlay(scatter);
    },
  },
};
</script>
